<template>
	<!-- 	<view class="tab-bar-wrap" :style="{color:setting.color,height:barHeight+'px'}">
		<view class="tab-bar" :style="{backgroundColor:setting.backgroundColor,height:barHeight+'px',borderTop:`1rpx solid ${setting.borderStyle}`}">

			<navigator :url="item.pagePath" class="tab-bar-item" v-for="(item,index) in setting.list" :key="index">
				<image :src="current==index?item.selectedIconPath : item.iconPath" mode="scaleToFill" :style="{height:imgHeight+'px',width:imgHeight+'px'}"></image>
				<view :style="{color:current==index? setting.selectedColor : setting.color}">
					{{item.text}}
				</view>
			</navigator>
		</view>
	</view> -->
	<view class="tab-bar-wrap" :style="{color:setting.color}">
		<view class="tab-bar" :style="{backgroundColor:setting.backgroundColor,borderTop:`1px solid ${setting.borderStyle=='white'? 'white' : '#dfdfdf'}`}">

			<navigator :url="item.pagePath" class="tab-bar-item" v-for="(item,index) in setting.list" :key="index">
				<image :src="current==index?item.selectedIconPath : item.iconPath" mode="scaleToFill"></image>
				<view :style="{color:current==index? setting.selectedColor : setting.color}">
					{{item.text}}
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			setting: {
				type: Object,
				default: () => {
					return {
						list: []
					}
				}
			},
			current: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				barHeight: 40,
				imgHeight: 20
			}
		},
		mounted() {

			// let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取胶囊按钮
			// console.log('胶囊信息', menuButtonObject)
			// uni.getSystemInfo({
			// 	success: res => {
			// 		console.log('系统信息', res)
			// 		let statusBarHeight = res.statusBarHeight;
			// 		this.barHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			// 		this.imgHeight = this.barHeight/2
			// 		console.log(this.barHeight)
			// 		// this.navHeight = this.statusBarHeight + this.contentHeight;
			// 	},
			// 	fail(err) {
			// 		console.log(err)
			// 	}
			// })

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar-wrap {
		font-size: 22rpx;
		height: 100rpx;
		width: 100%;
		z-index: 100;

		.tab-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.tab-bar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
			
			image{
				height: 42rpx;
				width: 42rpx;
			}
		}

	}
</style>
